<template>
  <div class="full-screen-video">
    <video ref="videoPlayer" :src="videoSrc" autoplay loop></video>
    <div class="countdown-container">
      <span class="countdown-number">{{ countdown }}</span>
      <span v-if="showSkip" class="skip-text" @click="skipToLogin">跳过</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const videoSrc = '/dol.mp4';
const videoPlayer = ref<HTMLVideoElement | null>(null);
const router = useRouter();
let countdown = ref(5);
let showSkip = ref(false);
let countdownTimer: any;

onMounted(() => {
  const requestFullScreen = (element: HTMLElement) => {
    if (element.requestFullscreen) element.requestFullscreen();
    else if ((element as any).mozRequestFullScreen) (element as any).mozRequestFullScreen();
    else if ((element as any).webkitRequestFullscreen) (element as any).webkitRequestFullscreen();
    else if ((element as any).msRequestFullscreen) (element as any).msRequestFullscreen();
  };
  
  const videoElement = videoPlayer.value;
  if (videoElement) requestFullScreen(videoElement);

  countdownTimer = setInterval(() => {
    if (countdown.value > 1) {
      countdown.value--;
      if (countdown.value === 3) {
        showSkip.value = true;
        nextTick(() => {
          document.querySelector('.skip-text')?.classList.add('fade-in');
        });
      }
    } else {
      clearInterval(countdownTimer);
      skipToLogin();
    }
  }, 1000);
});

const skipToLogin = () => {
  clearInterval(countdownTimer);
  router.push('/login');
};

onUnmounted(() => {
  clearInterval(countdownTimer);
});
</script>

<style scoped>
.full-screen-video {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.countdown-container {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 24px;
  color: white;
  font-size: 18px;
  font-weight: 500;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.countdown-number {
  min-width: 24px;
  text-align: center;
}

.skip-text {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.skip-text.fade-in {
  opacity: 1;
}

.skip-text:hover {
  color: #409eff;
  transform: scale(1.05);
  transition: all 0.2s;
}
</style>